<template>
	<PageLayout title="个人信息">
		<view
			style="display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100% ;width: 100%;background-color: #ffffff;">
			<!-- 个人信息表单 -->
			<view style="width: calc(100% - 20px); margin-bottom: 40px">
				<view
					style="display: flex;flex-direction: row;align-items: center;border-bottom: 1px solid #eee; padding: 16px;">
					<text style="width: 80px;display: flex;justify-content: flex-end;margin-right: 20px;">手机号</text>
						<text style="width:calc(100% - 100px);">{{personalInfo.personPhoneNumber}}</text>
				</view>
				<view
					style="display: flex;flex-direction: row;align-items: center;border-bottom: 1px solid #eee; padding: 16px;">
					<text style="width: 80px;display: flex;justify-content: flex-end;margin-right: 20px;">姓名</text>
					<input placeholder="请输入姓名" v-model="personalInfo.personName" style="width: calc(100% - 100px);color: #838383;" />
				</view>

				<view
					style="display: flex;flex-direction: row;align-items: center;border-bottom: 1px solid #eee; padding: 16px;">
					<text style="width: 80px;display: flex;justify-content: flex-end;margin-right: 20px;">职位</text>
					<picker :value="positionIndex" :range="positions" @change="handlePositionChange"
						style="width: calc(100% - 100px);color: #838383;">
						<text>{{ positionTranslate(personalInfo.position)  || '请选择职位' }}</text>
					</picker>
				</view>
				<view
					style="display: flex;flex-direction: row;align-items: center;border-bottom: 1px solid #eee; padding: 16px;">
					<text style="width: 80px;display: flex;justify-content: flex-end;margin-right: 20px;">密码</text>
					<input :type="showPassword ? 'text' : 'password'" placeholder="请输入新密码"
						v-model="personalInfo.password" style="width: calc(100% - 120px);color: #838383;" />
					<image :src="showPassword ? '/static/icons/visualize_black.png' : '/static/icons/hide_black.png'"
						style="  width: 20px; height: 20px;" mode="aspectFit" @click="togglePasswordVisibility" />

				</view>
			</view>

			<!-- 操作按钮 -->
			<view style="display: flex; justify-content: space-evenly;width: 100%;">
				<view
					style="padding:12px 40px; background-color: #ffffff; border-radius: 8px;border: 1px solid #007AFF;"
					@click="handleLogout">
					<text style="color: #007AFF;">登出</text>
				</view>
				<view style="padding:12px 40px; background-color: #007AFF; border-radius: 8px;" @click="handleUpdate">
					<text style="color: #ffffff;">更新数据</text>
				</view>
			</view>
		</view>
	</PageLayout>

</template>

<script setup>
	import PageLayout from "/pages/PageLayout/PageLayout.vue";
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		updateInfo
	} from "/utils/HttpUtils";
	import {
		saveGlobalDataToStorage
	} from "/utils/Utils";

	const showPassword = ref(false);
	const positions = ref(['领导', '安保人员']);
	const positionsEn = ref(['leader', 'security']);
	const positionIndex = ref(-1);
	const personalInfo = ref(getApp().globalData.person_info);
const timer = ref(null);
	onMounted(async () => {
		
		timer.value = setInterval(() => {
		}, 1000);
	});
	
	onUnmounted(() => {
		if (timer.value) clearInterval(timer.value);
	});

const positionTranslate = (position) => {
	if(position==="leader"){
		return "领导";
	}else if(position==="security"){
		return "安保人员";
	}
	else{
		return null;
	}
}


	const togglePasswordVisibility = () => {
		showPassword.value = !showPassword.value;
	};

	const handlePositionChange = (e) => {
		positionIndex.value = e.detail.value;
		personalInfo.value.position = positionsEn.value[e.detail.value];
	};

	const handleUpdate = async () => {
		if (!personalInfo.value.personName) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'error'
			});
			return;
		}

		try {
			const res = await updateInfo(
				personalInfo.value.personPhoneNumber,
				personalInfo.value.personName,
				personalInfo.value.position,
				personalInfo.value.password
			);

			if (res) {
				getApp().globalData.person_info=personalInfo.value;
				saveGlobalDataToStorage();
				uni.showToast({
					title: '更新成功'
				});
			}
		} catch (error) {
			uni.showToast({
				title: '更新失败',
				icon: 'none'
			});
		}
	};

	const handleLogout = () => {
		getApp().globalData.person_info = {"personPhoneNumber":null,
							"personName":null,
							"position":null,
							"password":null,
							"createTime":null};
		personalInfo.value=getApp().globalData.person_info;
		saveGlobalDataToStorage();
		uni.navigateTo({ url: '/pages/personal/personal' });
	};
</script>

<style>
</style>